<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面板 -->
        <el-card class="box-card" style="margin-top:20px">
            <el-alert title="添加商品" type="success" center show-icon>
            </el-alert>
            <template>
                <el-steps :active="activeIndex - 0" finish-status='success' align-center style="margin-top:20px">
                    <el-step title="基本信息" ></el-step>
                    <el-step title="商品参数" ></el-step>
                    <el-step title="商品属性" ></el-step>
                    <el-step title="商品图片" ></el-step>
                    <el-step title="商品内容" ></el-step>
                    <el-step title="完成" ></el-step>
                </el-steps>
                <el-form :model="addForm" label-width="100px" label-position="top">
                    <el-tabs v-model="activeIndex" tab-position="left" style="margin-top:30px" :before-leave='beforeTagLeave' @tab-click='tabClicked'>
                        <el-tab-pane label="基本信息" name='0'>
                            <el-form-item label="商品名称" prop="goods_name">
                                <el-input v-model="addForm.goods_name"></el-input>
                            </el-form-item>
                            <el-form-item label="商品价格" prop="goods_price">
                                <el-input v-model="addForm.goods_price" type="number"></el-input>
                            </el-form-item>
                            <el-form-item label="商品重量" prop="goods_weight">
                                <el-input v-model="addForm.goods_weight" type="number"></el-input>
                            </el-form-item>
                            <el-form-item label="商品数量" prop="goods_number">
                                <el-input v-model="addForm.goods_number" type="number"></el-input>
                            </el-form-item>
                            <el-form-item label="商品分类" prop="goods_cat">
                                <el-cascader expand-trigger="hover" :options="cateList" v-model="addForm.goods_cat" :props="cateProps" @change="handleChange">
                                </el-cascader>
                            </el-form-item>
                        </el-tab-pane>
                        <el-tab-pane label="商品参数" name="1">
                            <!-- 渲染表单的Item项 -->
                            <el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id">
                            <!-- 复选框组 -->
                            <el-checkbox-group v-model="item.attr_vals">
                                <el-checkbox :label="item.attr_vals" border></el-checkbox>
                            </el-checkbox-group>
                            </el-form-item>
                        </el-tab-pane>
                        <el-tab-pane label="商品属性" name="2">
                            <el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id">
                                <el-input v-model="item.attr_vals"></el-input>
                            </el-form-item>
                        </el-tab-pane>
                        <el-tab-pane label="商品图片" name='3'>
                            <el-upload
                            :headers='headerObj'
                            class="upload-demo"
                            :action="uploadUrl"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success='handleSuccess'
                            list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-tab-pane>
                        <el-tab-pane label="商品内容" name='4'>
                            <!-- 富文本编辑器 -->
                            <quill-editor v-model="addForm.goods_introduce" style="height:500px"></quill-editor>
                            <el-button @click="addGoods" type='primary' style="position:relative;z-index:999">添加商品</el-button>
                        </el-tab-pane>
                        <el-tab-pane label="完成" name='5'>完成</el-tab-pane>
                    </el-tabs>
                </el-form>
            </template>
        </el-card>
        <!-- 图片显示弹出框 -->
        <el-dialog
            title="预览图片"
            :visible.sync="picdialogVisible"
            width="30%">
            <img :src="picUrl" alt="">
            </el-dialog>
    </div>
</template>

<script>
import _ from 'lodash'
export default {
    data() {
        return {
            activeIndex:'0',
            addForm:{
                goods_name:'',
                goods_price:0,
                goods_weight:0,
                goods_number:0,
                goods_cat:[],
                pics:[],
                goods_introduce:'',
                attr:[]
            },
            cateList:[],
            cateProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            manyTableData:[],
            onlyTableData:[],
            uploadUrl:'http://127.0.0.1:8888/api/private/v1/upload',
            headerObj:{
                Authorization:window.sessionStorage.getItem('token')
            },
            picdialogVisible:false,
            picUrl:''
        }
    },
    created() {
        this.getCateList()
    },
    methods:{
        handleChange() {
            if(this.addForm.goods_cat.length < 3) {
                this.addForm.goods_cat = []
                return;
            }   
        },
        async getCateList() {
            let {data : res} = await this.$http.get('categories',{type:3})
            if(res.meta.status != 200) return this.$message.error(res.meta.msg)
            // console.log(res)
            this.cateList = res.data
        },
        beforeTagLeave(activeName,oldName) {
            if(oldName == 0 && this.addForm.goods_cat.length != 3) {
                this.$message.error('请先选择分类')
                return false
            }
        },
        async tabClicked() {
            let id = this.addForm.goods_cat[2]
            if(this.activeIndex == '1') {
                let {data : res} = await this.$http.get(`categories/${id}/attributes`,{
                    params:{sel:'many'}
                })
                if(res.meta.status != 200) return this.$message.error(res.meta.msg)
                this.manyTableData = res.data
            } else if(this.activeIndex == '2') {
                let {data : res} = await this.$http.get(`categories/${id}/attributes`,{
                    params:{sel:'only'}
                })
                if(res.meta.status != 200) return this.$message.error(res.meta.msg)
                this.onlyTableData = res.data
            }
        },
        handlePreview(file) {
            // 预览图片
            this.picdialogVisible = true
            // 文件返回的数据信息
            let url = file.response.data.url
            this.picUrl = url
        },
        handleRemove(file) {
            // 删除图片
            let tmp_path = file.response.data.tmp_path
            let index = this.addForm.pics.findIndex(x => {
                return x.tmp_path == tmp_path
            })
            this.addForm.pics.splice(index,1)
            // console.log(this.addForm.pics)
        },
        handleSuccess(res) {
            if(res.meta.status != 200) return this.$message.error(res.meta.msg)
            // 获取图片地址上传图片
            let pathObj = {"pic":res.data.tmp_path}
            this.addForm.pics.push(pathObj)
            // console.log(this.addForm.pics)
        },
        async addGoods() {
            // console.log(this.addForm)
            // 深拷贝
            let form = _.cloneDeep(this.addForm)
            // 转换成字符串
            form.goods_cat = form.goods_cat.join(',')
            // 将动态属性和静态参数放到attrs数组中
            this.manyTableData.forEach(item => {
                let obj = {
                    attr_id:item.attr_id,
                    attr_value:item.attr_vals.join(" ")
                }
                form.attrs.push(obj)
            })
            console.log(this.manyTableData)
            this.onlyTableData.forEach(item => {
                let obj = {
                    attr_id:item.attr_id,
                    attr_value:item.attr_vals
                }
                form.attrs.push(obj)
            })
            // let {data : res} = await this.$http.post('goods',form)
            // if(res.meta.status != 201) return this.$message.error(res.meta.msg)
            // this.$router.push('/goods')
        }
    }
}
</script>

<style lang="less" scoped>

</style>
